import Swiper from './swiper-7.4.1/swiper-bundle.esm.browser.min.js'

export class HomeRenderFn {
  constructor(ele, data) {
    this.ele = ele;
    this.data = data;
    this.currentSwiper = null;
  }

  sectionTitle(currentData = '标题') {
    const sectionTitle = document.createElement('h2');
    sectionTitle.className = 'sectionTitle wow animate__animated animate__fadeInUp';
    sectionTitle.innerText = currentData;
    this.ele.appendChild(sectionTitle);
  };

  businessFn() {
    // console.log('this.data', this.data)
    const businessTitle = document.createElement('div');
    businessTitle.classList.add('businessTitle');
    this.ele.appendChild(businessTitle);

    const ul = document.createElement('ul');
    ul.className = 'wow animate__animated animate__fadeInUp'
    this.data.forEach((item, index) => {
      const li = document.createElement('li');
      li.innerHTML = `
                <div class="s1_textBox">
                    <h3>${item.title}</h3>
                    <p class="animate__animated animate__fadeInUp">
                        ${item.text}
                    </p>
                </div>
                <span class="s1_Arrow"></span>
            `
      li.style['backgroundImage'] = `url(${item.url})`
      ul.appendChild(li);

      li.addEventListener('mouseenter', (e) => {
        li.classList.add('s1_active');
      })
      li.addEventListener('mouseleave', () => {
        li.classList.remove('s1_active');
      })
    })

    this.ele.appendChild(ul);
  };

  thisAntFn() {
    this.sectionTitle('这就是蚂蚁');
    // console.log('this.data',this.data)

    const ul = document.createElement('ul');
    this.data.forEach((item, index) => {
      const li = document.createElement('li');
      li.className = "wow animate__animated animate__fadeInUp";
      li.innerHTML = `
                <div class="s2_image">
                    <img src="${item.url}" alt="">
                </div>
                <h3>${item.title}</h3>
                <p>${item.text}</p>
            `
      ul.appendChild(li);
    })

    this.ele.appendChild(ul);
  };

  welfareFn() {
    this.sectionTitle('薪酬和福利');

    const ul = document.createElement('ul');
    ul.className = "wow animate__animated animate__fadeInUp";
    this.data.forEach((item, index) => {
      const li = document.createElement('li');
      li.innerHTML = `
                <div class="s3_back">
                    <div class="s3_content">
                        <h3>${item.title}</h3>
                        <p>${item.text}</p>
                    </div>
                </div>
            `
      li.style['backgroundImage'] = `url(${item.url})`;
      ul.appendChild(li);

      li.addEventListener('mouseenter', () => {
        li.classList.add('s3_active');
      })
      li.addEventListener('mouseleave', () => {
        li.classList.remove('s3_active');
      })
    })

    this.ele.appendChild(ul);
  };

  dreamsFn() {
    this.sectionTitle('使命和愿景');

    const div = document.createElement('div');
    // div.classList.add('section4_Box');
    div.className = "section4_Box wow animate__animated animate__fadeInUp";
    div.innerHTML = `
            <div class="s_Center">
                <div class="centerImage">
                    <img src="${this.data[0].url}">
                </div>
            </div>

            <div class="s_Left">
                <div class="s4_hideBox">
                    <div class="s_Left_img">
                        <img src="${this.data[0].url}">
                    </div>
                </div>
                <div class="s_Left_Text">
                    ${this.data[2].text}
                </div>
                <div class="s_Left_icon">
                    <img src="${this.data[2].iconUrl}">
                </div>
            </div>

            <div class="s_Right">
                <img src="${this.data[1].url}">
            </div>
        `
    this.ele.appendChild(div);
  };

  preIntroduceFn() {
    this.sectionTitle('回想人物志');

    let slide = '';
    this.data.forEach((item) => {
      slide += `
            <div class="swiper-slide">
                <div class="swiperItem">
                    <div class="cardCover" style="background-image: url('${item.cover}');"></div>
                    <div class="cardCon">
                        <div class="cardTag">${item.resume}</div>
                        <div class="cardTitleGroup">
                            <div class="cardTitleContent">
                                <h3>${item.sketch}</h3>
                                ${item.content}
                            </div>
                        </div>
                        <div class="cardStorytellerWrap">
                            <div class="cardStoryteller">
                                <span class="avatarBox"><img src="${item.cover}"></span>
                                <span class="nickDepartment">${item.name}·${item.position}</span>
                            </div>
                            <button class="moreBtn">
                                <span>了解更多</span>
                                <span style="margin-left: 6px"><img src="https://project-jiu-files-1308151379.cos.ap-guangzhou.myqcloud.com/project-mayi/mayi-ArrowUp-blue.svg"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            `
    })

    const div = document.createElement('div');
    div.className = "section5_Box wow animate__animated animate__fadeInUp";

    div.innerHTML = `
            <div class="swiper">
                <div class="swiper-wrapper">${slide}</div>
            </div>
            <div class="swiper-button-prev swiperBtn">
                <img src="https://project-jiu-files-1308151379.cos.ap-guangzhou.myqcloud.com/project-mayi/mayi-swiper-leftArrow.svg">
            </div>
            <div class="swiper-button-next swiperBtn">
                <img src="https://project-jiu-files-1308151379.cos.ap-guangzhou.myqcloud.com/project-mayi/mayi-swiper-rightArrow.svg">
            </div>
       `
    this.ele.appendChild(div);

    const mySwiper = new Swiper('.swiper', {
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项
      slidesPerView: 1.9,

      // 前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

  };

  spaceFn() {
    this.sectionTitle('环境和氛围');
    // console.log('this.data', this.data)

    const div = document.createElement('div');
    div.className = "section6_Box wow animate__animated animate__fadeInUp";

    // 选项卡标题
    const titleList = document.createElement('ul');
    titleList.classList.add('titleList');

    // 选项卡内容展示区
    const titleCard = document.createElement('ul');
    titleCard.classList.add('titleCard');

    let ind = null;
    this.data.forEach((item, index) => {
      const titleLi = document.createElement('li');
      // 添加选项卡选项内容
      titleLi.innerText = item.title;
      titleList.appendChild(titleLi);

      // 添加轮播图
      const cardLi = document.createElement('li');
      let slide = '';
      item.w_carousels.forEach((item) => {
        slide += `
                    <div class="swiper-slide">
                        <img src="${item.url}">
                    </div>
                `;
      })
      cardLi.innerHTML = `
                 <div class="swiper_space swiper_space${index}">
                    <div class="swiper-wrapper">${slide}</div>
                    <div class="swiper2-button-prev swiperBtn btn-prev-${index}">
                        <img src="https://project-jiu-files-1308151379.cos.ap-guangzhou.myqcloud.com/project-mayi/mayi-swiper-leftArrow.svg">
                    </div>
                    <div class="swiper2-button-next swiperBtn btn-next-${index}">
                       <img src="https://project-jiu-files-1308151379.cos.ap-guangzhou.myqcloud.com/project-mayi/mayi-swiper-rightArrow.svg">
                    </div>
                 </div>
                 <div class="spaceMask">
                    <div class="spaceStatus">
                        <span>1</span>/${item.w_carousels.length}
                    </div>
                    <div class="spaceDesc">
                        <p>${item.text}</p>
                    </div>
                 </div>
            `
      titleCard.appendChild(cardLi);

      // 切换选项卡
      titleList.childNodes[0].className = "titleList_active";
      titleCard.childNodes[0].className = "titleCard_active";
      titleLi.onclick = () => {
        // console.log('this.currentSwiper',this.currentSwiper.init)
        for (let i = 0; i < titleList.childNodes.length; i++) {
          titleList.childNodes[i].className = "";
          titleCard.childNodes[i].className = "";
        }
        titleList.childNodes[index].className = "titleList_active";
        titleCard.childNodes[index].className = "titleCard_active";
        // console.log(' ', ind)
      }

      /* new Swiper(`.swiper_space`, {
          direction: 'horizontal', // 垂直切换选项
          slidesPerView: 1,
          rewind:true,
          autoplay: true,
          on: {
              slideChangeTransitionStart: function(){
                console.log(this.activeIndex);
                ind = this.activeIndex;
              },
            },
 
          // 前进后退按钮
          navigation: {
              nextEl: '.swiper2-button-next',
              prevEl: '.swiper2-button-prev',
          },
      }) */
    });
    div.appendChild(titleList);
    div.appendChild(titleCard);
    this.ele.appendChild(div);

    const p = document.createElement('p');
    p.className = 'spaceNotes';
    p.innerHTML = '<span>*</span>蚂蚁集团在中国及全球多个城市均设有办公地点';
    this.ele.appendChild(p);

    titleCard.childNodes.forEach((item, index) => {
      this.currentSwiper = new Swiper(`.swiper_space${index}`, {
        direction: 'horizontal', // 垂直切换选项
        slidesPerView: 1,
        rewind: true,
        autoplay: {
          disableOnInteraction: false,
        },

        on: {
          slideChangeTransitionStart: function () {
            ind = this.activeIndex;
            item.querySelector('.spaceStatus>span').innerText = this.activeIndex + 1;
          },
        },

        // 前进后退按钮
        navigation: {
          nextEl: `.btn-prev-${index}`,
          prevEl: `.btn-next-${index}`,
        },
      })
    })
  };
}

export class SocialRenderFn {
  constructor(ele, data) {
    this.ele = ele;
    this.data = data;
  }

  questionAreaFn() {
    const sectionTitle = document.createElement('h2');
    sectionTitle.className = 'sectionTitle';
    sectionTitle.innerText = "常见问题";
    this.ele.appendChild(sectionTitle);

    const questionList = document.createElement('div');
    questionList.className = "questionList";

    this.data.forEach((item, index) => {
      const questionItem = document.createElement("div");
      questionItem.className = "questionItem";

      let questions = '';
      item.questions.forEach(item => {
        questions += `<p>${item}</p>`;
      })

      questionItem.innerHTML = `
                <img class="questionItem-img" src="${item.url}">
                <div class="questionItem-body">
                        <h3>${item.title}</h3>
                        ${questions}
                        <a>更多问题<span><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></a>
                </div>
            `
      questionList.appendChild(questionItem);
    })
    this.ele.appendChild(questionList);
  };

  reminderFn() {
    const image = document.createElement("img");
    image.setAttribute("src", this.data[0].url);
    this.ele.appendChild(image);
  };
}

export class LoginRenderFn {
  constructor(ele) {
    this.ele = ele;
  }

  defaultLoginFn() {
    const defaultLogin = document.createElement("div");
    defaultLogin.className = "defaultLogin";

    const btn = document.createElement("button");
    const btnImg = document.createElement("img");
    const btnSpan = document.createElement("span");
    btnImg.src = "https://project-jiu-files-1308151379.cos.ap-guangzhou.myqcloud.com/project-mayi/login/mayi_login_btnImg.svg";
    btnSpan.innerText = "支付宝账号登录";
    btn.appendChild(btnImg);
    btn.appendChild(btnSpan);

    const link = document.createElement("p");
    link.className = "other_link link";
    link.innerText = "其他方式登录";
    link.onclick = () => {
      this.ele.innerHTML = '';
      this.otherLoginFn();
    }

    defaultLogin.appendChild(btn);
    defaultLogin.appendChild(link);
    this.ele.appendChild(defaultLogin);
  };

  otherLoginFn() {
    const otherLogin = document.createElement("div");
    otherLogin.className = "otherLogin";

    // 创建标题
    const cardTitle = document.createElement("div");
    cardTitle.className = "cardTitle";
    cardTitle.innerHTML = `
      <div class="btnGroup">
        <button class="btn_phone">手机号登录</button>
        <button class="btn_email">邮箱登录</button>
      </div>
      <div class="bottomLine"></div>
    `;
    otherLogin.appendChild(cardTitle);

    // 创建内容
    const cardContent = document.createElement("form");
    cardContent.className = "cardContent";

    // 手机号/邮箱输入框
    const switch_box = document.createElement("div");
    switch_box.className = "switch_box";

    // 手机号
    const phone_box = document.createElement("div");
    phone_box.className = "phone_box input_box switch_active";
    phone_box.innerHTML = `
      <select name="phone" id="phone">
        <option value="86">86</option>
        <option value="222">222</option>
        <option value="333">333</option>
        <option value="444">444</option>
      </select>
      <input type="text" placeholder="手机号"/>
    `;
    switch_box.appendChild(phone_box);

    // 邮箱
    const email_box = document.createElement("div");
    email_box.className = "email_box input_box";
    email_box.innerHTML = `
      <input type="text" placeholder="邮箱"/>
    `;
    switch_box.appendChild(email_box);

    // 插入手机号/邮箱
    cardContent.appendChild(switch_box);

    // 验证码输入框
    const code_box = document.createElement("div");
    code_box.className = "code_box input_box";
    code_box.innerHTML = `
      <input type="text" placeholder="验证码"/>
      <button>发送验证码</button>
    `;
    cardContent.appendChild(code_box);

    // 登录按钮
    const login_btn = document.createElement("button");
    login_btn.className = "login_btn";
    login_btn.innerText = "登录";
    cardContent.appendChild(login_btn);

    const link = document.createElement("p");
    link.className = "default_link link";
    link.innerText = "支付宝登录";
    link.onclick = () => {
      this.ele.innerHTML = '';
      this.defaultLoginFn();
    }

    otherLogin.appendChild(cardContent);
    otherLogin.appendChild(link);
    this.ele.appendChild(otherLogin);
    this.titleFn();
  };

  titleFn() {
    const cardTitle = document.querySelector(".cardTitle")
    const bottomLine = document.querySelector(".bottomLine")
    const phone_box = document.querySelector('.phone_box');
    const email_box = document.querySelector('.email_box');
    console.log('cardTitle', cardTitle)
    cardTitle.onclick = (e) => {
      if (e.target.className == "btn_phone") {
        bottomLine.style['transform'] = 'translateX(0)'

        email_box.classList.remove('switch_active')
        phone_box.classList.add('switch_active')
      }
      if (e.target.className == "btn_email") {
        bottomLine.style['transform'] = 'translateX(100%)'

        phone_box.classList.remove('switch_active')
        email_box.classList.add('switch_active')
      }
    }
  };
}

/* export class LifeRenderFn {
  constructor(ele, data) {
    this.ele = ele,
      this.data = data,
  }
} */